<template>
  <div class="Login">
    <el-dialog :visible.sync="isshow.isshow" width="640px">
      <div class="main">
        <div class="left">
                <img src="../assets/PDSU.png"  style="background-color:white" alt="">
        </div>
        <div class="right">
          <div class="title">
            <el-tabs v-model="activeName" >
            <el-tab-pane label="登录" name="first">
               <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
            size="medium"
          >
            <el-form-item label="手机号登录" prop="mobile" >
              <el-input
                v-model="ruleForm.mobile"
                placeholder="请输入手机号"
              ></el-input>
            </el-form-item>

            <el-form-item label="密码" prop="pass">
              <el-input
                type="password"
                v-model="ruleForm.pass"
                autocomplete="off"
                 placeholder="请输入密码"
              ></el-input>
                 <a class="FreeLogin" style="cursor:pointer" @click="FreeRegister">没有账号？免费注册></a>
            </el-form-item>
               <el-button type="primary" @click="submitFormLogin('ruleForm')" style="width:100%;margin-top:20px" >
                   立即登录
                </el-button>
              
          </el-form>
            </el-tab-pane>
            <el-tab-pane label="新用户注册" name="second">
                  <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
            size="medium"
          >
            <el-form-item label="手机号注册" prop="mobile" >
              <el-input
                v-model="ruleForm.mobile"
                placeholder="请输入手机号"
              ></el-input>
            </el-form-item>

            <el-form-item label="密码" prop="pass">
              <el-input
                type="password"
                v-model="ruleForm.pass"
                autocomplete="off"
                 placeholder="设置登录密码，不少于8位"
              ></el-input>
            </el-form-item>
            <el-form-item label="验证码" prop="mobile" >
              <el-input
                v-model="code"
                placeholder="必填"
              >
              </el-input>
            <el-button type="info" :loading="IsSend" @click="isSend" v-if="!sendShow">点击获取验证码</el-button>
            <el-button type="info" v-else >验证码获取成功，点击重新获取</el-button>
            </el-form-item>
               <el-button type="primary" @click="submitForm('ruleForm')" style="width:100%;margin-top:20px" >
                   立即创建
                </el-button>
          </el-form>
            </el-tab-pane>
    
       </el-tabs></div>
         
         
        </div>
      </div>
 
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    isshow: {
      type: Object,
      default: false,
    },
  },
  data() {
    return {
      ruleForm: {
        mobile: "",
        pass:"",
      },
      activeName: 'second',
      IsSend:false,
      sendShow:false,
      code:'',
      rules: {
        mobile: [
          { required: true, message: "请输入平院音乐手机号", trigger: "blur" },
          { min: 11, max: 11, message: "请输入正确的手机号", trigger: "blur" },
        ],
        pass: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 5, max: 10, message: "密码长度必须在5-10位数", trigger: "blur" },
          ],
          
      },
    };
    
  },
    methods:{
        submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
             let formInformation = {
                account : this.ruleForm.mobile,
             }
            let url = `https://autumnfish.cn//captcha/verify?phone=${this.ruleForm.mobile}&captcha=${this.code}`
            this.axios.get(url).then((res)=>{
              console.log('验证成功',res);
               window.localStorage.setItem('account',JSON.stringify(formInformation.account));
            this.$router.go(0);
            this.isshow = false
            }).catch(()=>{
               this.$message.error('验证码错误');
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
        submitFormLogin(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
             let formInformation = {
                account : this.ruleForm.mobile,
             }
            window.localStorage.setItem('account',JSON.stringify(formInformation.account));
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      FreeRegister(){
        this.activeName='second'
      },
      //发送验证码
      isSend(){
        this.IsSend = true
        let url = `https://autumnfish.cn/captcha/sent?phone=${this.ruleForm.mobile}`
        this.axios.get(url).then((res)=>{
          if(res.data){
            this.IsSend = false
            this.sendShow = true
          }
        })
       
      },
    
    }
};
</script>

<style scoped>
.main {
  display: flex;
}
.FreeLogin {
  font-size: 12px;
    color: #999;
    text-decoration: none;
        float: right;
}
.main .left {
  width: 242px;
  height: 410px;
  background: url(../assets/b2.jpg) 50%
    no-repeat;
  text-align: center;
}
.main .left img {
    height: 54px;
    width: 242px;
}
.main .right {
  padding: 40px;
}
.main .right .title {
  width: 100%;
  margin-top: 30px;
  margin-bottom: 30px;
  font-size: 20px;
  color: #606266;
}
</style>

<style scoped>
.Login >>> .el-dialog__body {
  padding: 0;
}
.Login >>> .el-dialog__header {
  padding: 0;
}
.el-button--primary {
    color: #fff;
    background-color: #e61723;
    border-color: #e61723;
        height: 44px;
    width: 100%;
    border-radius: 0;
}
.el-button--primary:focus, .el-button--primary:hover {
    background: #eb454f;
    border-color: #eb454f;
    color: #fff;
}
</style>